<template>
  <!-- 单行组件：文本、勾选框、slot -->
  <div
    v-if="prefix&&prefixWidth!=0"
    class="any-outsidebar"
  >
    <div
      :class="required?'any-prefix':'any-prefix2'"
      :style="prefixWidth?('min-width:'+prefixWidth+';width:'+prefixWidth):''"
    >{{prefix}}</div>
    <!-- 单选 -->
    <el-radio-group
      v-if="type=='radio'"
      :class="vertical?'radio-outsidebar2':'radio-outsidebar'"
      v-model="elValue"
      :disabled="disabled"
      @change="changeClick"
    >
      <el-radio
        v-for="(item, index) in option"
        :key="index"
        :label="valuekey&&item&&typeof item=='object'?item[valuekey]:item"
        :disabled="disabledkey&&item&&typeof item=='object'?item[disabledkey]:false"
        class="radio-insidebar"
        :style="vertical?'margin-bottom:12px':''"
      >
        <slot
          v-if="expand"
          :item="item"
          :index="index"
        ></slot>
        <template v-else>{{item&&typeof item=='object'?item[labelkey]:item}}</template>
      </el-radio>
    </el-radio-group>
    <!-- 多选 -->
    <el-checkbox-group
      v-else-if="type=='checkbox'"
      :class="vertical?'radio-outsidebar2':'radio-outsidebar'"
      v-model="elValue"
      :max="checkboxMax"
      :disabled="disabled"
      @change="changeClick"
    >
      <el-checkbox
        v-for="(item, index) in option"
        :key="index"
        :label="valuekey&&item&&typeof item=='object'?item[valuekey]:item"
        :disabled="disabledkey&&item&&typeof item=='object'?item[disabledkey]:false"
        class="radio-insidebar"
        :style="vertical?'margin-bottom:12px':''"
      >
        <slot
          v-if="expand"
          :item="item"
          :index="index"
        ></slot>
        <template v-else>{{item&&typeof item=='object'?item[labelkey]:item}}</template>
      </el-checkbox>
    </el-checkbox-group>
    <!-- 扩展slot -->
    <slot name="suffix"></slot>
  </div>

  <!-- 单个勾选框 -->
  <!-- 单选 -->
  <el-radio-group
    v-else-if="type=='radio'"
    :class="vertical?'radio-outsidebar2':'radio-outsidebar'"
    v-model="elValue"
    :disabled="disabled"
    @change="changeClick"
  >
    <el-radio
      v-for="(item, index) in option"
      :key="index"
      :label="valuekey&&item&&typeof item=='object'?item[valuekey]:item"
      :disabled="disabledkey&&item&&typeof item=='object'?item[disabledkey]:false"
      class="radio-insidebar"
      :style="vertical?'margin-bottom:12px':''"
    >
      <slot
        v-if="expand"
        :item="item"
        :index="index"
      ></slot>
      <template v-else>{{item&&typeof item=='object'?item[labelkey]:item}}</template>
    </el-radio>
  </el-radio-group>
  <!-- 多选 -->
  <el-checkbox-group
    v-else-if="type=='checkbox'"
    :class="vertical?'radio-outsidebar2':'radio-outsidebar'"
    v-model="elValue"
    :max="checkboxMax"
    :disabled="disabled"
    @change="changeClick"
  >
    <el-checkbox
      v-for="(item, index) in option"
      :key="index"
      :label="valuekey&&item&&typeof item=='object'?item[valuekey]:item"
      :disabled="disabledkey&&item&&typeof item=='object'?item[disabledkey]:false"
      class="radio-insidebar"
      :style="vertical?'margin-bottom:12px':''"
    >
      <slot
        v-if="expand"
        :item="item"
        :index="index"
      ></slot>
      <template v-else>{{item&&typeof item=='object'?item[labelkey]:item}}</template>
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
import anyfishUI from "../../index";
export default {
  name:"mm-select-check",
  props: {
    obj: {// InputObj
      type: Object,
      default: function () {
        return null;
      }
    },

    objKey: {// 数据对应InputObj的key值
      type: String,
      default: ""
    },

    prefix: {// 左边的文本内容
      type: String,
      default: null
    },

    prefixWidth: {// 左边的文本宽度：3.6rem、10px、20%等，为0则不显示，为空则自适应
      type: String,
      default: null
    },

    type: {// radio、checkbox
      type: String,
      default: "radio"
    },

    option: {// 数据
      type: Array,
      default: null
    },

    labelkey: {// 对应数据的显示值的key
      type: String,
      default: null
    },

    valuekey: {// 对应数据的选中值的key
      type: String,
      default: null
    },

    disabledkey: {// 对应数据的禁用key
      type: String,
      default: null
    },

    vertical: {// 是否是垂直方向的延伸
      type: Boolean,
      default: false
    },

    expand: {// 是否允许扩展勾选内容
      type: Boolean,
      default: false
    },

    checkboxMax: {// 多选的勾选框的最大可选个数
      type: Number,
      default: 1000
    },

    required: {// 是否必填
      type: Boolean,
      default: false
    },

    disabled: {// 是否不可用
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      elValue: []
    }
  },

  watch: {
    obj() {
      this.register();
    },

    objKey() {
      this.register();
    },

    type() {
      this.changeClick(null);
    }
  },

  mounted() {
    this.register();
  },

  destroyed() {
    this.obj._unRegister(this.objKey);
  },

  methods: {
    register() {
      let self = this;
      this.obj._watch(this.objKey, function (value) {
        self.elValue = value;
      }, function (value) {
        if (self.type == "checkbox") {
          if (!value) {
            value = [];
          }
        }
        return value;
      });
      this.obj._register(this.objKey, function () {
        return self.checkData(self.obj[self.objKey], self.required, self.prefix ? self.prefix : "内容");
      });
    },

    checkData(data, required, prefix) {
      if (!required) {
        return true;
      }
      if (data == undefined || data == null) {
        anyfishUI.api.toast("请选择" + prefix);
        return false;
      }
      if ((typeof data == "string" ? data.trim() : data + "").length < 1) {
        anyfishUI.api.toast("请选择" + prefix);
        return false;
      }
      return true;
    },

    changeClick(value) {
      this.obj[this.objKey] = value;
      this.$emit("change", value);
    }
  }
}
</script>

<style scoped>
.any-outsidebar {
  margin: 0.5rem 1rem;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}

.any-prefix2 {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.any-prefix {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.any-prefix::before {
  margin: 1px;
  color: #ee0a24;
  font-size: 14px;
  content: "*";
}

.radio-outsidebar {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
}

.radio-outsidebar2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}

.radio-insidebar {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>